<template>
  <div class="waiting-info">
    <el-form-item label="logo">
      <el-button type="primary" @click="handleSelect">选择LOGO</el-button>
      <div class="picture-wrap">
        <template v-if="!!optionsInfo?.logoUrl?.val?.url">
          <img :src="`${optionsInfo.logoUrl?.val?.url}`" alt="企业Logo" />
          <p class="icon-wrap" @click="handleDeletePicture">
            <i class="el-icon-close icon-delete" />
          </p>
        </template>
        <template v-else>
          <div class="el-upload el-upload--text" @click="handleSelect">
            <i class="el-icon-plus avatar-uploader-icon" />
          </div>
        </template>
      </div>
    </el-form-item>
    <el-form-item label="顶部标题">
      <el-input v-model="optionsInfo['topTitle']" placeholder="请输入顶部标题" />
    </el-form-item>
    <!-- <div class="list-item-setting" v-if="!optionsInfo.ListLocaleSys">
      <div class="title-info">
        <el-divider content-position="left">列表区域设置</el-divider>
      </div>
      <el-form-item label="展示行数">
        <el-input-number
          :min="4"
          :max="7"
          v-model="optionsInfo['showRowNums']"
          class="hide-spin-button"
          size="small"
          @change="handleTotal"
        />
      </el-form-item>

      <el-form-item label="内容高度">
        <el-input-number
          v-model="optionsInfo['contentHeight']"
          :min="0"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>
    </div> -->

    <div class="list-item-setting" v-if="!optionsInfo.DataDisplayRuleSys">
      <el-divider content-position="left">数据显示规则</el-divider>
      <el-form-item label="规则显示" class="call-patient-set">
        <el-checkbox-group
          v-if="ruleOptions && ruleOptions.length"
          v-model="optionsInfo['queryRule']"
        >
          <el-checkbox
            v-for="item in ruleOptions"
            :label="item.value"
            :key="item.value"
            @change="(e) => handleRuleChange(e, item)"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </div>


    <el-form-item
      class="register-info"
      v-if="optionsInfo['defaultShowCol'].includes('registerObjNames')"
    >
      <div class="title">
        <el-divider content-position="center">号别类型</el-divider>
      </div>
      <div class="options-info">
        <el-radio-group v-model="optionsInfo['registerObjNameKey']">
          <el-radio
            :label="item.dictValue"
            :value="item.dictValue"
            :key="item.dictValue"
            v-for="item in registerObjNameOptions"
          >
            {{ item.dictLabel }}
          </el-radio>
        </el-radio-group>
      </div>
    </el-form-item>

    <div class="list-scroll-setting" v-if="!optionsInfo.ListSettingSys">
      <div class="title-info">
        <el-divider content-position="left">列表设置</el-divider>
      </div>
      <el-form-item label="候诊类型设置" class="wait-patient-set">
        <el-radio-group v-model="optionsInfo.waitPatientType">
          <el-radio
            :label="item.value"
            v-for="item in waitPatientTypeOptions"
            :key="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="字号设置">
        <el-input-number
          v-model="optionsInfo['itemFontSize']"
          :min="12"
          size="small"
          class="hide-spin-button"
        />
      </el-form-item>

      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['itemFontWeight']" placeholder="请选择">
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item
        label="滚动速度(设备比例*19.2*速率/s)"
        class="column-area"
        v-if="fieldHas('listSpeed')"
      >
        <el-input-number
          :precision="1"
          :min="1"
          size="small"
          v-model="optionsInfo['listSpeed']"
        />
      </el-form-item> -->

      <el-form-item label="切屏时间(s)" class="switching-screen">
        <el-input-number
          :min="10"
          :step="1"
          size="small"
          class="hide-spin-button"
          v-model="optionsInfo['switchTime']"
          :disabled="!optionsInfo['switchScreen']"
        />
      </el-form-item>
    </div>

    <!--弹曾选择-->
    <!-- <div class="list-item-setting" v-if="optionsInfo['layerEdit']">
      <el-divider content-position="left">弹层选择</el-divider>
      <el-form-item class="call-patient-set">
        <el-select v-model="optionsInfo['layerNameKey']" placeholder="请选择">
          <el-option
            v-for="item in layerNameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </div> -->
    <div class="list-item-setting" >
      <el-divider content-position="left">温馨提示</el-divider>
      <el-form-item class="call-patient-set">
        <el-input v-model="optionsInfo['tips']" placeholder="请输入温馨提示" />
      </el-form-item>
    </div>
     <!--选择图片的弹层-->
    <SelectPicture
      :info="PictureInfo.info"
      :visible="PictureInfo.visible"
      @handleSure="handleSure"
      @handleCancel="handleCancel"
    />
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import SelectPicture from "@c/public/layer/template/selectPicture/index.vue";
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";
import roomNameKeyEditor from "@detailsEdit/scene-edit/basicInfo/roomNameKey-editor.vue";
import deptNameKeyEditor from "@detailsEdit/scene-edit/basicInfo/deptNameKey-editor.vue";

export default {
  name: "waitingInfoNxUltrasoundConfig-editor",

  componentName: "waitingInfoNxUltrasoundConfig-editor",

  components: {
    Draggable,
    deptNameKeyEditor,
    roomNameKeyEditor,
    SelectPicture
  },

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      constantDic: constantDic,
      predefineColors: types["predefineColors"],
      waitPatientTypeOptions: types["waitPatientTypeOptions"],
      callPatientOptions: [
        {
          value: 1,
          label: "科室",
        },
        {
          value: 2,
          label: "号别",
        },
        {
          value: 3,
          label: "诊室",
        },
        {
          value: 4,
          label: "医生工作站",
        },
      ],
      ruleOptions: [
        {
          value: 1,
          label: "医生",
        },
        {
          value: 2,
          label: "号别",
        },
      ],
      optionsInfo: Object(),
      mergeOptions: [
        {
          label: "科室",
          value: "deptName",
          state: false,
          disabled: false,
          display: false,
        },
        {
          label: "诊室",
          value: "treatmentRoomName",
          state: false,
          disabled: false,
          display: true,
        },
        {
          label: "医生",
          value: "workerName",
          state: false,
          disabled: false,
          display: false,
        },
        {
          label: "号别",
          value: "registerObjNames",
          state: false,
          disabled: false,
          display: true,
        },
        {
          label: "人数",
          value: "waitPatientCount",
          state: false,
          disabled: false,
          display: false,
        },
      ],
      fontWeightOptions: types["fontWeightOptions"],
      layerNameOptions: types["layerNameOptions"],
      PictureInfo: {
        visible: false,
        info: 1,
      },
    };
  },

  computed: {
    // 判断字段是否存在
    fieldHas() {
      return function (field) {
        return Reflect.has(this.optionsInfo, field);
      };
    },

    isDisabled() {
      return function (val) {
        // let arr = ['deptName', 'treatmentRoomName', 'workerName'];
        let arr = Array();
        return arr.includes(val);
      };
    },

    registerObjNameOptions() {
      return this.$store.getters["templateDetails/getRegisterObjNameOptions"];
    },
  },

  methods: {
    // 选择图片
    handleSelect(value) {
      let info = Object();
      let { logoUrl } = this.optionsInfo;
      Reflect.set(info, "content", logoUrl);
      Reflect.set(info, "type", 1);
      Reflect.set(info, "updataType", "logoUrl");
      Reflect.set(this.PictureInfo, "visible", true);
      Reflect.set(this.PictureInfo, "info", info);
    },
    // 删除logo
    handleDeletePicture(value) {
      this.optionsInfo.logoUrl = null;
    },

    // 取消弹层
    handleCancel() {
      Reflect.set(this.PictureInfo, "visible", false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      console.log(valInfo,'valInfo')
      const self = this;
      let { key, val } = valInfo;
       Reflect.set(self.optionsInfo, key, valInfo);
    },
    // 更改合并项
    handleMergeCol(event, key) {
      console.log(this.optionsInfo["mergeColInfo"][key]);
    },

    handleChangeScroll(val) {
      if (val) {
        Reflect.set(this.optionsInfo, "ellipsisState", false);
        Reflect.set(this.optionsInfo, "patientSpace", true);
      } else {
        Reflect.set(this.optionsInfo, "patientSpace", false);
      }
    },

    // 拖动结束
    handleDragEnd() {},

    // 改变弹层字号
    handleChangeFontSize(val, type) {
      if (type === "current") {
        this.optionsInfo["layerInfo"]["waiting"]["fontSize"] = val;
      } else if (type === "waiting") {
        this.optionsInfo["layerInfo"]["current"]["fontSize"] = val;
      }
    },

    // 总条数
    handleTotal(val) {
      let { multiple } = this.optionsInfo;
      this.optionModel.rowNumber = multiple * val;
    },

    // 科室诊室&号别--科室和好别不能共存
    handleChange(val, row) {
      let value = row.value;
      let { checkList } = this.optionsInfo;
      if (value === 1) {
        if (val) {
          this.$lodash.pull(checkList, 2);
        }
      }
      if (value === 2) {
        if (val) {
          this.$lodash.pull(checkList, 1);
        }
      }
    },

    // 医生和号别二选一--方便拓展采选多选的形式
    handleRuleChange(val, row) {
      let value = row.value;
      let { queryRule } = this.optionsInfo;
      if (val) {
        if (value === 1) {
          if (val) {
            this.$lodash.pull(queryRule, 2);
          }
        }
        if (value === 2) {
          if (val) {
            this.$lodash.pull(queryRule, 1);
          }
        }
      } else {
        if (!(queryRule && !!queryRule.length)) {
          queryRule.push(value);
          this.$message({
            message: "数据规则不可为空",
            type: "warning",
          });
        }
      }
    },

    handleChangeWidth(event, key) {
      console.log(event);
      console.log(key);
    },

    handleCheckboxClick(event) {
      // 检查点击事件的目标是否为label元素
      if (event.target.tagName.toLowerCase() === "label") {
        // 阻止事件冒泡，这样就不会触发el-checkbox-group的点击事件处理函数
        event.stopPropagation();
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-wrap {
  margin: 10px 0 20px 0;
  position: relative;
  overflow: hidden;

  img {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
  }

  .icon-wrap {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius: 0 0 100px 0;

    .icon-delete {
      font-weight: bold;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .el-upload {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 108px;
    height: 108px;
    cursor: pointer;
    line-height: 116px;
    vertical-align: top;

    &:hover {
      border-color: #409eff;
      color: #409eff;
    }

    .el-icon-plus {
      font-size: 1.25rem;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
.switching-screen {
  :deep(.el-input-number__decrease) {
    margin-top: 1px;
  }

  :deep(.el-input-number__increase) {
    margin-top: 1px;
  }
}

.call-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    @include fontWeight();
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }

    .el-select {
      width: 100%;
    }
  }
}

.tooltip-area {
  :deep(.el-form-item__content) {
    .wrap {
      display: flex;
      align-items: center;
      align-self: center;
      .right {
        .el-button {
          padding: 9px 8px;
          border: none;
          font-size: 18px;
          color: #e6a23c;

          &:hover {
            background: transparent !important;
          }
        }
      }
    }
  }
}

.col-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: auto;
    }

    .el-icon-thumb {
      position: relative;
      top: 8px;
      padding-left: 10px;
      font-size: 18px;
      text-align: center;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }
}

//号别简称
.register-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-radio-group {
      .el-radio {
        width: 100%;
        padding: 8px 0;
      }
    }
  }
}

.row-option {
  :deep(.el-checkbox) {
    display: flex;
    flex-direction: row;

    .el-checkbox__input {
      display: flex;
      align-self: flex-start;
      align-items: flex-start;
    }

    .el-checkbox__label {
      display: flex;
      flex-direction: row;

      .setting-info {
        display: flex;
        flex-direction: column;

        .el-input {
          width: 100%;
          margin-bottom: 20px;

          input[type="number"] {
            line-height: 1px !important;
          }
        }

        .el-input-number {
          width: 100%;
        }

        .el-input__inner {
          padding-right: 0 !important;
        }
      }
    }
  }
}

.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }
  }
}

.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }
  }
}
</style>
